<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue中的数据代理</title>
  <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>我的名字是，{{name}}</h3>
        <h3>我的年龄是，{{age}}</h3>
    </div>
    <script>
      /**
       * (1)Vue中的数据代理：vm通过Object.defineproperty代理处理data(其实是_data)的属性
       * (2)跟着上条的括号内容：因为配置对象的data传过来时，内部执行了 this._data = data
       * (3)什么叫代理处理_data的属性?
       *    因为vm对name、age的访问与处理其实是对_data中的name、age进行处理
       * (4)为什么要代理处理_data的属性?假如setter修改的是_data的数据，这与我想要修改实例中的属性不就相违背了吗？
       *    没有相违背，setter修改的确实是_data的数据，但是模板中获取属性时是通过getter啊，而getter就是
       *    从刚刚修改过的_data中获取的----即对_data修改(体现了代理处理数据)，并对_data访问(体现了值的来源是来自_data,即两个值相等)
       *    
      */
       const vm = new Vue({
          el:'#root',
          data:{
             name:'Jace Zhou',
             age: 22
          }
       })
       console.log(vm);
    </script>
</body>
</html>